import React from 'react';
import styled from 'styled-components';
import { Link } from 'react-router-dom';

const PermissionDeniedContainer = styled.div`
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 70vh;
  padding: 2rem;
  text-align: center;
  color: #333;
`;

const Icon = styled.div`
  font-size: 5rem;
  margin-bottom: 1.5rem;
`;

const Title = styled.h2`
  font-size: 2rem;
  margin-bottom: 1rem;
  color: #e53e3e;
`;

const Message = styled.p`
  font-size: 1.1rem;
  margin-bottom: 2rem;
  max-width: 500px;
  line-height: 1.6;
`;

const ActionButton = styled(Link)`
  background-color: #4a5568;
  color: white;
  padding: 0.75rem 1.5rem;
  border-radius: 4px;
  font-weight: 500;
  text-decoration: none;
  transition: background-color 0.2s;

  &:hover {
    background-color: #2d3748;
  }
`;

const PermissionDenied = () => {
  return (
    <PermissionDeniedContainer>
      <Icon>🚫</Icon>
      <Title>权限不足</Title>
      <Message>
        很抱歉，您没有足够的权限访问此页面。请联系系统管理员获取权限，或返回首页继续操作。
      </Message>
      <ActionButton to="/admin/dashboard">返回仪表盘</ActionButton>
    </PermissionDeniedContainer>
  );
};

export default PermissionDenied;